<template>
    <!-- <input type="text" class="content" :value="props.block.props.content" @input="(ev)=>handleChange((ev.target as HTMLInputElement).value)"> -->
    <input type="text" class="content" v-model="content" v-bind="contentAttr">
    <div style="color:red">{{errors.content}}</div>
    <div>
      <button @click="()=>push('')">动态添加</button>
      <button @click="()=>console.log(JSON.stringify(values))">输出</button>
    </div>
    <div v-for="field in fields" :key="field.key">
      {{ field.key }}
      <input type="text" v-model="field.value">
    </div>
</template>
<script setup lang="ts">
import {defineRule,useFieldArray,useForm} from 'vee-validate';
import {watch} from 'vue';

import type { TextBlock } from '@/types/Block';
const props=defineProps<{
    block:TextBlock
}>()

const emit=defineEmits<{(event:'change',block:TextBlock):void}>()

// const handleChange=(content:string)=>{
//     const block={...props.block,props:{...props.block.props,content}}
//     emit('change',block)
// }
defineRule('required',(value:string)=>{
  if(!value||!value.length){
    return "文本不得为空！"
  }
  return true;
})
const {values,errors,defineField}=useForm({
  validationSchema:{
    content:"required"
  },
  initialValues:{
    content:props.block.props.content,
    person:{
      name:"张三",
      info:{
        hobby:['篮球']
      }
    }
  }
})

const [content,contentAttr]=defineField('content')
const {fields,push}=useFieldArray('person.info.hobby')
watch(content,(newValue)=>{
  const block={...props.block,props:{...props.block.props,content:newValue}}
  emit('change',block)
})


</script>
<style scoped>
.content{
    width: 100%;
}
</style>
